<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title</title>
		<style type="text/css">
			#box {
				width: 500px;
				height: 500px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<!-- 点击按钮，在div里面创建一个新的p元素 -->
		<input type="button" id="btn" value="按钮" />
		
		<div id="box">
			<div>
				<span>呵呵</span>
				<p>11111</p>
				<p>22222</p>
				<p>33333</p>
				<p>44444</p>
			</div>
		</div>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// $("div").children("p").click(function(){})
			$(function(){
				//bind方式
// 				$("p").bind({
// 					click:function () {
// 						alert("呵呵")
// 					},
// 					mouseenter:function () {
// 						// alert("哈哈")
// 					}
// 				});
				
				$("#btn").click(function() {
					$("<p>我是新增加的p元素</p>").appendTo("div");
				});
				
				//简单事件,给自己注册的事件
// 				$("div").click(function() {
// 					alert("哈哈");
// 				});
				
				//delegate:代理,委托
				//1.给父元素注册委托事件,最终还是有子元素来执行.
				
				//要给div注册一个委托事件，但是最终不是由执行,而是有p执行
				//第一个参数: selector:事件最终由谁来执行.
				//第二个参数:事件的类型
				//第三个参数:函数,要做什么
				
				//1.动态创建的也能有事件:缺点:只能注册委托事件
				$("#box").delegate("p","click",function(){
					// alert('呵呵');
					console.log(this);
				});
				
				//注册简单事件,缺点:一次只能注册一个事件
				$("p").click(function(){
					alert("呵呵");
				});
			});
		</script>
	</body>
</html>